<template>
  <div id="houtai">
    <n-layout has-sider>
      <n-layout-sider content-style="padding: 24px;"> 海淀桥 </n-layout-sider>
      <n-layout>
        <n-layout-header> 颐和园路 </n-layout-header>
        <n-layout-content content-style="padding: 24px;">
          平山道
          <LoginView />
        </n-layout-content>
        <n-layout-footer>成府路</n-layout-footer>
      </n-layout>
    </n-layout>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";
import LoginView from "../login/LoginView.vue";
const state = reactive({
  count: 0,
});
toRefs(state);
</script>

<style scoped>
#houtai {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  height: 100%;
}
.n-space {
  width: 100%;
}
.n-layout {
  height: 100%;
}
.n-layout-header,
.n-layout-footer {
  height: 10%;
  min-width: 100%-272px;
  background: rgba(128, 128, 128, 0.2);
  padding: 24px;
}

.n-layout-sider {
  background: rgba(128, 128, 128, 0.3);
}

.n-layout-content {
  height: 80%;
  width: 100%;
  background: rgba(128, 128, 128, 0.4);
}
</style>
